<nz-card class="list_card" [nzTitle]="cardTitle" [nzExtra]="extraTemplate">
  <form nz-form>
    <nz-tabset>
      <!-- 阿里云存储选项卡 -->
      <nz-tab [nzTitle]="ossTabTitleTpl">
        <ng-template #ossTabTitleTpl>
          <span>阿里云存储</span>
        </ng-template>

        <!-- 是否启用 -->
        <div nz-col nzSpan="24">
          <div nz-row>
            <div style="margin-bottom: 20px;" nz-col nzSpan="12">
              <label nz-checkbox name="ossIsEnabled" [(ngModel)]="ossSetting.isEnabled">是否启用(请确认配置正确后再启用！)</label>
            </div>
          </div>
        </div>

        <!-- accessKeyId -->
        <nz-form-item>
          <nz-form-label nzFor="accessKeyId">accessKeyId</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="accessKeyId" name="accessKeyId" [attr.disabled]="!ossSetting.isEnabled ? 'disabled' : null"
              [(ngModel)]="ossSetting.accessKeyId">
          </nz-form-control>
        </nz-form-item>

        <!-- accessKeySecret -->
        <nz-form-item>
          <nz-form-label nzFor="accessKeySecret">accessKeySecret</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="accessKeySecret" name="accessKeySecret" [attr.disabled]="!ossSetting.isEnabled ? 'disabled' : null"
              [(ngModel)]="ossSetting.accessKeySecret">
          </nz-form-control>
        </nz-form-item>

        <!-- 地域节点 -->
        <nz-form-item>
          <nz-form-label nzFor="endPoint">地域节点</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="地域节点" name="endPoint" [attr.disabled]="!ossSetting.isEnabled ? 'disabled' : null"
              [(ngModel)]="ossSetting.endPoint">
          </nz-form-control>
        </nz-form-item>

        <!-- 存储桶名称 -->
        <nz-form-item>
          <nz-form-label nzFor="bucketName">存储桶名称</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="存储桶名称" name="bucketName" [attr.disabled]="!ossSetting.isEnabled ? 'disabled' : null"
              [(ngModel)]="ossSetting.bucketName">
          </nz-form-control>
        </nz-form-item>

      </nz-tab>

      <!-- 腾讯云存储选项卡 -->
      <nz-tab [nzTitle]="cosTabTitleTpl">
        <ng-template #cosTabTitleTpl>
          <span>腾讯云存储</span>
        </ng-template>

        <!-- 是否启用 -->
        <div nz-col nzSpan="24">
          <div nz-row>
            <div style="margin-bottom: 20px;" nz-col nzSpan="12">
              <label nz-checkbox name="cosIsEnabled" [(ngModel)]="cosSetting.isEnabled">是否启用(请确认配置正确后再启用！)</label>
            </div>
          </div>
        </div>

        <!-- 应用ID -->
        <nz-form-item>
          <nz-form-label nzFor="appId">应用ID</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="应用ID" name="appId" [attr.disabled]="!cosSetting.isEnabled ? 'disabled' : null"
              [(ngModel)]="cosSetting.appId">
          </nz-form-control>
        </nz-form-item>

        <!-- 秘钥id -->
        <nz-form-item>
          <nz-form-label nzFor="secretId">秘钥id</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="秘钥id" name="secretId" [attr.disabled]="!cosSetting.isEnabled ? 'disabled' : null"
              [(ngModel)]="cosSetting.secretId">
          </nz-form-control>
        </nz-form-item>

        <!-- 秘钥Key -->
        <nz-form-item>
          <nz-form-label nzFor="secretKey">秘钥Key</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="秘钥Key" name="secretKey" [attr.disabled]="!cosSetting.isEnabled ? 'disabled' : null"
              [(ngModel)]="cosSetting.secretKey">
          </nz-form-control>
        </nz-form-item>

        <!-- 区域 -->
        <nz-form-item>
          <nz-form-label nzFor="region">区域</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="区域" name="region" [attr.disabled]="!cosSetting.isEnabled ? 'disabled' : null"
              [(ngModel)]="cosSetting.region">
          </nz-form-control>
        </nz-form-item>

        <!-- 存储桶名称 -->
        <nz-form-item>
          <nz-form-label nzFor="bucketName">存储桶名称</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="存储桶名称" name="bucketName" [attr.disabled]="!cosSetting.isEnabled ? 'disabled' : null"
              [(ngModel)]="cosSetting.bucketName">
          </nz-form-control>
        </nz-form-item>

      </nz-tab>
    </nz-tabset>
  </form>

</nz-card>

<ng-template #cardTitle>
  <div class="card_title">
    <i style="margin-right: 10px" nz-icon [type]="'storage'" theme="fill"></i> 存储配置
  </div>
</ng-template>

<ng-template #extraTemplate>
  <div class="tab_operate">
    <button nz-button type="button" (click)="submitForm()" class="ant-btn ant-btn-primary"><span>全部保存</span></button>
  </div>
</ng-template>
